<template>
  <ArmyPanelLayout class="barracksLeftTwo" title="巡更记录" :rightPanel="true">
    <div v-if="historyArr.length" class="warehouseRightIndex">
      <el-scrollbar height="250px">
        <!--<RecodTimeLine v-for="i in 100" :key="i"></RecodTimeLine>-->
        <RecodTimeLine v-for="(item, i) in historyArr" :record="item" :key="item.title + i"></RecodTimeLine>
      </el-scrollbar>
    </div>
    <div v-else class="empty" style="margin-top: 20%;">
      <DataEmptyTwo></DataEmptyTwo>
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import RecodTimeLine from '@/views/armyScreen/warehouse/right/RecodTimeLine.vue'
import {ElScrollbar} from 'element-plus'
import  {guardTourHistory} from '@/api/armyScreenApi.js'
import $bus from "@/util/bus";
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";

/************/
onMounted(()=> {
  guardTourHistoryService()
  $bus.on('reRequest', guardTourHistoryService)
})
onBeforeUnmount(() => {
  $bus.off('reRequest', guardTourHistoryService)
})
/************/
const historyArr = ref([])
function guardTourHistoryService () {
  guardTourHistory().then(res => {

    historyArr.value = res.data || []
  })
}

</script>

<style lang="scss" scoped>
.barracksLeftTwo {
  width: 437px;
  height: 320px;
  padding: 0 21px;
  padding-top: 49px;
}
.warehouseRightIndex{
  padding-top: 8px;
}
</style>
